<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素 心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 自适应居中 */
				margin: 200px auto;
				transform: rotate(135deg);
				/* 透明属性 属性值：0~1 范围值 */
				opacity: .9;
				/* 滤镜属性 光晕：下阴影 */
				filter: drop-shadow(0 0 20px #ffff00);
				/* 动画属性:关键帧名称 过渡时间  过渡方式 无限循环*/
				animation: heart .8s linear infinite;
			}
			/* 伪类选择器 给元素附加上效果的选择器
			    语法：div:hover{}  当鼠标悬停到div上 实现的【样式】
				 需求：鼠标悬停到中间心位置改成圆
				 ：before 在元素之前添加文本，通常与content： ""
				 :after   在元素之后添加文本，通常与content： ""
				 */
				/* 伪类选择器div上方怎加文本/画圆 */
				 div:before{
					 content: "";/* 行转块 */
					 /* 显示属性（c3）display
					 display: block; 转成块级元素
					 display: inline;转成行级元素
					 display: none;元素消失
					 */
					 display: block;
					 width: 200px;
					 height: 200px;
					 background-color: #e4393c;
					 border-radius: 50%;
					 position: relative;
					 left: -100px;
					 
				 }
				 div:after{
					 content: "";
					 display: block;
					 width: 200px;
					 height: 200px;
					 background-color: #e4393c;
					 border-radius: 50%;
					 position: relative;
					 top: -100px;
				 }
				 /* ------动画-------*/
				 /* 1.创建关键帧--手翻书*/
				 @keyframes heart{
					 /* 3个画面：①等比例出现，防止跳帧
					             ②缩小比例
								 ③放大比例
								 */
					 0%{
						 /* 转换属性：缩放属性值 1表示等比例*/
						 transform: rotate(135deg) scale(1);
					 }
					 30%{
						 transform: rotate(135deg) scale(.8);
					 }
					 100%{
						 transform: rotate(135deg) scale(1.2);
					 }
				 }
		</style>
	</head>
	<body>
		<!-- 画一颗心  html一个元素-->
		<div></div>
		<!-- html 元素的分类，按照元素的特点分为：
		          ①块元素：可以设置高宽，独占一行，典型的块元素：div
				  ②行元素：不可以设置高宽，可以在一行内显示，典型的行元素：span
				          文本内容属于行元素
				  ③行内块元素：可以在一行内显示，可以设置高宽，典型的行内元素：img
		 
		 
		 -->
		 <!-- 音乐 -->
		 <audio src="renxi.mp3" autoplay loop></audio>
	</body>
</html>